<template>
  <!-- 消控室值守 -->
  <div class="content-item control-room">
    <div class="content-item-title">消控室值守</div>
    <div class="content-item-wrap">
      <div class="control-type-wrap">
        <div class="control-type no-people">
          <i></i>
          <p class="type-name">无人值守</p>
          <p class="type-value">{{noDutyOrgNum}}</p>
        </div>
        <div class="control-type has-people">
          <i></i>
          <p class="type-name">有人值守</p>
          <p class="type-value">{{dutyOrgNum}}</p>
        </div>
      </div>
      <!-- 值守情况截图 -->
      <div v-if="controlRoomList.length > 0" class="check-pic-wrap">
        <!-- 图片放大 -->
        <div class="big-pic">
          <el-image :src="selectedItem.picUrl" @click="$imgViewer" :data-imgpreview="selectedItem.picUrl" fit="cover"></el-image>
        </div>
        <!-- 图片列表 -->
        <div class="show-pic-info">
          <div class="room-info-wrap">
            <div class="watch-type-icon" :class="selectedItem.isDuty==1 ? 'haspeople-icon' : 'nopeople-icon'"></div>
            <div class="room-info">
              <p class="location-name">{{selectedItem.orgName}}</p>
              <p
                class="watch-type-text"
                :class="selectedItem.isDuty==1 ? 'haspeople' : 'nopeople'"
              >{{selectedItem.isDuty==1 ? '有人值守' : '无人值守'}}</p>
              <p class="find-time">发现时间 {{selectedItem.happenTime}}</p>
            </div>
          </div>
          <!-- 轮播图 -->
          <div class="pic-list-wrap">
            <div class="prev-btn" @click="prevPage">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="pic-bg">
              <ul class="pic-wrap">
                <li
                  v-for="(srcItem, i) in controlRoomList"
                  :key="srcItem.index"
                  :class="selectedItem.index === srcItem.index ? 'active':''"
                  @click="selectedItem = srcItem;selectIndex = i"
                >
                  <el-image :src="srcItem.picUrl" fit="cover"></el-image>
                </li>
              </ul>
            </div>
            <div class="next-btn" @click="nextPage">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
      <!-- <p v-else class="check-pic-wrap">暂无数据</p> -->
      <div v-else class="check-pic-wrap no-data">
        <p class="no-data-text">暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getControlRoomDutyCount, getOrgControlRoomDutyInfo } from '@/api/home'
export default {
  name: 'ControlRoom',
  data() {
    return {
      dutyOrgNum: 0,
      noDutyOrgNum: 0,
      orgIds: this.$store.state.userinfo.organizationIds,
      controlRoomList: [],
      selectedItem: {},
      selectIndex: 0,
      total: 0,
      pageIndex: 1,
      pageSize: 3,
      getNewId: new Date().getTime(),
    }
  },
  created() {
    this.controlRoomDutyCount()
    this.controlRoomDutyInfo()
  },
  methods: {
    controlRoomDutyCount() {
      let that = this
      let parames = {
        orgIds: this.orgIds,
      }
      getControlRoomDutyCount(parames).then((res) => {
        that.dutyOrgNum = res.data.dutyOrgNum
        that.noDutyOrgNum = res.data.noDutyOrgNum
      })
    },
    controlRoomDutyInfo(type) {
      let that = this
      let parames = {
        orgIds: this.orgIds,
        pageIndex: that.pageIndex - 1,
        pageSize: that.pageSize,
      }
      getOrgControlRoomDutyInfo(parames).then((res) => {
        for (let i in res.data) {
          this.$set(res.data[i], 'index', this.getNewId + i)
        }
        that.controlRoomList = res.data
        that.selectedItem =
          type == 1
            ? res.data[2]
            : type == 2
            ? res.data[0]
            : res.data.length > 0
            ? res.data[0]
            : {}
        that.total = res.total
      })
    },
    prevPage() {
      if (this.selectIndex > 0) {
        this.selectIndex -= 1
        this.selectedItem = this.controlRoomList[this.selectIndex]
      } else {
        if (this.pageIndex == 1) {
          this.$message({
            message: '已经到达第一张',
            type: 'warning',
          })
        } else if (this.pageIndex >= 0) {
          this.selectIndex = 2
          this.pageIndex -= 1
          this.controlRoomDutyInfo(1)
        }
      }
    },
    nextPage() {
      let item = this.total / 3
      let item1 = item.toString().substr(0, 1)
      if (
        this.selectIndex < this.pageSize - 1 &&
        this.controlRoomList.length == 3
      ) {
        this.selectIndex += 1
        this.selectedItem = this.controlRoomList[this.selectIndex]
      } else {
        if (this.pageIndex <= item1 && this.total % 3 != 0) {
          this.selectIndex = 0
          this.pageIndex += 1
          this.controlRoomDutyInfo(2)
        } else {
          this.$message({
            message: '已经到达最后一张',
            type: 'warning',
          })
        }
      }
    },
    // 更新/刷新模块
    refreshModel(data) {
      let that = this

      that.controlRoomDutyCount()
      that.controlRoomDutyInfo()
    },
  },
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style>
.control-room .content-item-wrap {
  display: flex;
  padding-bottom: 0;
}

.control-type-wrap {
  display: flex;
  width: 270px;
  height: 300px;
  justify-content: space-between;
  flex-direction: column;
}
.control-type-wrap .control-type {
  width: 250px;
  height: 140px;
  color: #fff;
}
.control-type-wrap .control-type.no-people {
  background-color: #e44d60;
}
.control-type-wrap .control-type.has-people {
  background-color: #3880d4;
}

.control-type-wrap .control-type i {
  display: block;
  float: left;
  margin: 45px 30px 10px 45px;
  width: 40px;
  height: 50px;
  background: url(../../../assets/images/home/people.png) no-repeat;
  background-size: 100%;
}
.control-type-wrap .no-people i {
  background-position: 0 0;
}
.control-type-wrap .has-people i {
  background-position: 0 -59px;
}

.control-type-wrap .control-type .type-name {
  margin-top: 25px;
  font-size: 16px;
  line-height: 40px;
}

.control-type-wrap .control-type .type-value {
  font-size: 30px;
}

.check-pic-wrap {
  display: flex;
  width: 940px;
  height: 300px;
  border: 1px solid rgb(189, 189, 189, 0.6);
  padding: 25px 20px;
}
.check-pic-wrap li {
  cursor: pointer;
}
.check-pic-wrap li .el-image {
  height: 100%;
  width: 100%;
}
.check-pic-wrap .big-pic {
  width: 490px;
  height: 250px;
  text-align: center;
}
.check-pic-wrap .big-pic .el-image {
  height: 100%;
  width: 100%;
}
.check-pic-wrap .show-pic-info {
  margin-left: 20px;
  width: 380px;
}
.check-pic-wrap .room-info-wrap {
  margin-top: 40px;
  margin-bottom: 10px;
  height: 90px;
}
.check-pic-wrap .watch-type-icon {
  float: left;
  width: 150px;
  height: 80px;
  background-size: 60px;
}
.haspeople-icon {
  background: url(../../../assets/images/home/has-people.png) center 0 no-repeat;
}
.nopeople-icon {
  background: url(../../../assets/images/home/no-people.png) center 0 no-repeat;
}
.room-info .location-name {
  font-size: 16px;
  color: #666;
  font-weight: bold;
}
.room-info .watch-type-text {
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
}
.room-info .haspeople {
  color: #3880d4;
}
.room-info .nopeople {
  color: #e44d60;
}
.room-info .find-time {
  color: #999;
  font-size: 12px;
  margin-top: 10px;
}

.pic-list-wrap {
  display: flex;
  margin-top: 20px;
  height: 100px;
  align-items: center;
}
.control-room .next-btn,
.control-room .prev-btn {
  width: 25px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  cursor: pointer;
}
.control-room .next-btn,
.control-room .prev-btn {
  /* background: url(../../../assets/images/home/prev-btn.png) center center no-repeat; */
  padding: 0;
  margin: 0;
  height: 36px;
  width: 36px;
  line-height: 36px;
  cursor: pointer;
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  text-align: center;
  font-size: 12px;
}
.control-room .next-btn:hover,
.control-room .prev-btn:hover {
  background-color: #666;
}
.pic-list-wrap .pic-bg {
  width: 330px;
  overflow: hidden;
}
.pic-list-wrap .pic-wrap {
  display: flex;
  min-width: 380px;
}
.pic-list-wrap .pic-wrap li {
  float: left;
  display: block;
  margin: 0 5px;
  box-sizing: border-box;
  width: 100px;
  height: 80px;
  overflow: hidden;
}
.pic-list-wrap .pic-wrap li.active {
  border: 2px solid #6ed4ff;
}
</style>
